<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >添加</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList" :border="true">
      <!-- 基础信息 -->
      <el-table-column label="企业全称" align="center" prop="fullName" />
      <el-table-column label="企业简称" align="center" prop="shorterName" />
      <el-table-column align="center" prop="logo" label="企业LOGO" width="100">
        <template slot-scope="scope">
          <imagePreview :src="scope.row.logo" />
        </template>
      </el-table-column>
      <el-table-column label="所属行业" align="center" prop="trade" />
      <!-- <el-table-column label="企业网址" align="center" prop="website"/> -->
      <!-- <el-table-column label="企业域名" align="center" prop="realmName"/> -->
      <!-- "status": 1, //启用状态 0-未启用 1-已启用 -->
      <el-table-column label="状态" align="center" key="status" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column label="企业ID" align="center" prop="cid"/> -->
      <!-- 更多信息 -->
      <!-- <el-table-column
        align="center"
        prop="license"
        label="企业营业执照"
        width="80"
      >
        <template slot-scope="scope">
          <img :src="scope.row.license" width="50" height="50" />
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="企业信用代码" align="center" prop="creditCode" /> -->
      <el-table-column label="企业联系人" align="center" prop="contacts" />
      <el-table-column label="联系电话" align="center" prop="phone" />
      <!-- <el-table-column label="企业简介" align="center" prop="synopsis" /> -->
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pagesize"
      @pagination="getList"
    />
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <h3>基本信息</h3>
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业全称" prop="fullName">
                <el-input
                  v-model="form.fullName"
                  placeholder="请输入企业全称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业简称" prop="shorterName">
                <el-input
                  v-model="form.shorterName"
                  placeholder="请输入企业简称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属行业" prop="tradeId">
                <el-select
                  v-model="form.tradeId"
                  placeholder="请选择"
                  @change="changeIndustry"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业网址" prop="website">
                <el-input
                  v-model="form.website"
                  placeholder="请输入企业网址"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业LOGO" prop="logo">
                <uploadImage v-model="form.logo" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业域名" prop="realmName">
                <el-input
                  v-model="form.realmName"
                  placeholder="请输入企业域名"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <h3 @click="changeMore">
          <span>更多信息</span>
          <i :class="iconClass"></i>
        </h3>
        <div v-show="isShow === true">
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业信用代码" prop="creditCode">
                <el-input
                  v-model="form.creditCode"
                  placeholder="请输入企业信用代码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业联系人" prop="contacts">
                <el-input
                  v-model="form.contacts"
                  placeholder="请输入企业联系人"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入联系电话"
                  maxlength="11"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="企业简介">
            <editor v-model="form.synopsis" :min-height="192" />
          </el-form-item>
          <el-form-item label="企业营业执照" prop="license">
            <uploadImage
              v-model="form.license"
              placeholder="请输入企业营业执照"
              :theType="10"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadImage from "@/components/ImageUpload";
import Editor from "@/components/Editor";
import {
  listData,
  getData,
  delData,
  addData,
  updateData,
  delMultiData,
  getSelect,
  getEnable,
} from "@/api/system/outUnitAdmin";
import { getDict } from "@/api/select";

export default {
  name: "outUnitAdmin",
  components: {
    UploadImage,
    Editor,
  },
  data() {
    var validateCode = (rule, value, callback) => {
      // 新晋时代企业信用代码：91140105MA0GUQ3W7N
      // 此字段不必填
      if (this.form.creditCode) {
        var isTrue = this.creditCodeValid(this.form.creditCode);
        if (isTrue) {
          callback();
        } else {
          callback(new Error("请输入正确的企业信用代码!"));
        }
      } else {
        callback();
      }
    };
    return {
      isShow: false,
      iconClass: "el-icon-arrow-down",
      loading: true,
      dataList: [],
      title: "",
      open: false,
      form: {},
      queryParams: {
        currentPage: 1,
        pagesize: 10,
      },
      total: 0,
      rules: {
        fullName: [
          { required: true, message: "企业全称不能为空", trigger: "blur" },
        ],
        shorterName: [
          { required: true, message: "企业简称不能为空", trigger: "blur" },
        ],
        tradeId: [
          { required: true, message: "请选择所属行业", trigger: "change" },
        ],
        /* creditCode: [
          { validator: validateCode, trigger: 'blur' }
        ], */
        contacts: [
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      industryOptions: [], //所属行业下拉框
    };
  },
  watch: {},
  created() {
    this.getList();
    getDict(1, 1).then((response) => {
      // 1-所属行业 1
      this.industryOptions = response.result.data;
    });
  },
  methods: {
    changeType(val) {
      this.form.typeVal = val
        ? this.typeOptions.find((ele) => ele.id === val).label
        : "";
    },
    changeLevel(val) {
      this.form.levelVal = val
        ? this.levelOptions.find((ele) => ele.id === val).label
        : "";
    },
    changeGender(val) {
      this.form.genderVal = val
        ? this.genderOptions.find((ele) => ele.id === val).label
        : "";
    },
    /** 查询字典数据列表 */
    getList() {
      this.loading = true;
      listData().then((response) => {
        this.dataList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        theType: 2, //企业类型 1-平台企业 2-外委单位
        fullName: undefined,
        shorterName: undefined,
        tradeId: undefined,
        trade: undefined,
        industry: undefined,
        website: undefined,
        realmName: undefined,
        status: undefined,
        logo: undefined,
        creditCode: undefined,
        contacts: undefined,
        phone: undefined,
        synopsis: undefined,
        license: undefined,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const theId = row.theid;
      getData(theId).then((response) => {
        this.form = response.result;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addData(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const theId = row.theid;
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delData(theId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    handleStatusChange(row) {
      let text = row.status === 1 ? "启用" : "停用";
      this.$confirm(
        '是否确认' + text + '"?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          // 调接口 改变状态值
          return getEnable(row.theid, row.status);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === 1 ? 0 : 1;
        });
    },
    // 切换 隐藏/显示 更多信息
    changeMore() {
      if (this.isShow === false) {
        this.isShow = true;
        this.iconClass = "el-icon-arrow-up";
      } else {
        this.isShow = false;
        this.iconClass = "el-icon-arrow-down";
      }
    },
    changeIndustry(val) {
      this.form.trade = val
        ? this.industryOptions.find((ele) => ele.id === val).label
        : "";
    },
  },
};
</script>

<style scoped lang="scss">
/* /deep/ .el-table {
  margin-left: 100px;
} */
/* treeselect */
.vue-treeselect__input {
  display: block;
}
/deep/ .vue-treeselect__control {
  height: 32px;
  line-height: 32px;
  margin-top: 3px;
}

.el-form /deep/ h3 {
  background: #f1e9c8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  margin-bottom: 10px;
  cursor: pointer;
}
/* .el-date-editor*/
/deep/ .el-dialog__body .el-date-editor.el-input,
/deep/ .el-dialog__body .el-date-editor.el-input__inner {
  // width: 220px;
  width: auto !important;
}
/* .el-table .active {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
} */
</style>